<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>脚本编辑</title>
        <script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
        <#include "/pubHeadStyleTree.html">
        <script src="${ctx}/formStatic/script/InitMirror.js"></script>
        <script src="${ctx}/formStatic/script/codemirror.js"></script>
    </head>
    <body>
        <style>
            .comment_div {
                position: absolute;
                background-color: #fafafa;
                border: 1px solid #c9cfd6;
                width: 740px;
                height: 540px;
                top: 0;
                left: 50%;
                margin-left: -370px;
            }

            .top_div {
                height: 60%;
            }

            .bottom_div {
                height: 17%;
                font-size: 13px;
            }

            .top_left_div {
                margin: 5px;
                border: 1px solid #d2d2d2;
                height: 95%;
                float: left;
                width: 75%;
            }

            .top_right_div {
                margin: 5px;
                float: left;
                width: 160px;
                height: 95%;
                border: 1px solid #d2d2d2;
            }

            .l-tab-links {
                height: 42px;
                overflow: hidden;
                position: relative;
                width: 100%;
            }

            .l-tab-content {
                border: medium none;
                height: 100%;
                margin: 0;
                padding: 0;
                width: 100%;
                margin-top: 2px;
            }

            .l-tab-links ul {
                left: 0;
                list-style: none outside none;
                margin: 0;
                overflow: hidden;
                padding: 0;
                position: absolute;
                top: 0;
                width: 9999px;
            }

            .l-tab-links li {
                cursor: pointer;
                float: left;
                font-size: 13px;
                height: 42px;
                line-height: 47px;
                margin: 0 2px;
                overflow: hidden;
                position: relative;
                *margin-top: 10px;
            }

            .expre-ul {
                width: 99%;
                height: 300px;
                margin: 0;
                padding: 0;
                overflow: auto;
            }

            .title-div {
                line-height: 27px;
                font-size: 14px;
                font-weight: bold;
            }

            .calTool {
                margin: 3px;
                float: left;
                width: 40px;
                height: 40px;
                font-size: 13px;
                font-weight: bold;
                text-align: center;
                line-height: 38px;
                cursor: pointer;
            }

            .l-tab-links ul {
                left: 0;
                list-style: none outside none;
                margin: 0;
                overflow: hidden;
                padding: 0;
                position: absolute;
                top: 0;
                width: 9999px;
                background: #ccc;
            }

            .toolbar_btn {
                background-position: 0 -80px;
                width: 80px;
                height: 30px;
                font-size: 13px;
                font-weight: bold;
                text-align: center;
                line-height: 28px;
                cursor: pointer;
                margin: 3px 10px;
            }

            .layadmin-tabspage-none .layui-layout-admin .layui-header {
                position: absolute;
                top: -53px !important;
                display: none;
            }

            .layadmin-tabspage-none .layui-layout-admin .layui-body {
                position: absolute;
                top: 0;
            }

            .layui-table-body {
                overflow: hidden;
            }

            .layui-side .layui-side-menu {
                display: none;
            }
        </style>
        <div class="comment_div">
            <div style="background: #ccc;height: 30px;line-height: 30px;font-size:14px;">脚本</div>
            <div class="top_div">
                <div class="top_left_div">
                    <!-- 				<div title="流程变量"> -->
                    <!-- 					<ul id="varTree" class="ztree expre-ul"></ul> -->
                    <!-- 				</div> -->

                    <div title="脚本">
                        <ul id="scriptTree" class="ztree expre-ul"></ul>
                    </div>
                </div>
                <div class="top_right_div">
                    <div class="l-tab-links title-div">&nbsp;&nbsp;表达式运算符</div>
                    <div id="tools_comment"></div>
                </div>
            </div>
            <div class="bottom_div">
                <div class="l-tab-links title-div">&nbsp;&nbsp;规则表达式</div>
                <textarea id="exp_text" codemirror="true" mirrorheight="51px" cols="110" rows="6"
                          style="display: none;"></textarea>
                <div class="CodeMirror-wrapping" style="position: relative;"><textarea tabindex="100000"
                                                                                       style="position: absolute; left: -10000px; width: 10px;"></textarea>
                </div>

            </div>
            <div class="layui-form-item bottom_toolbar" style="z-index:10000">
                <span class="toolbar_btn" id="verification">验证表达式</span>
                <button style="float: right;margin:5px 10px 0 0" class="layui-btn layui-btn-sm layui-btn-danger"
                        id="esc">
                    取消
                </button>
                <button style="float: right;margin:5px 10px 0 0" class="layui-btn layui-btn-sm" id="determine">
                    确定
                </button>

            </div>
        </div>
        <div class="verResults" hidden>
            <div style="padding:20px 0">
                <div class="layui-form-item" style="border:1px solid #ccc;margin-bottom:0;border-bottom:none">
                    <label class="layui-form-label" style="background: #ebebeb;">结果值类型: </label>
                    <div class="layui-input-inline">
                        <span id="resultType" style="line-height: 38px;margin-left:5px"></span>
                    </div>
                </div>
                <div class="layui-form-item" style="border:1px solid #ccc;margin-bottom:0">
                    <label class="layui-form-label" style="background: #ebebeb;">结果值: </label>
                    <div class="layui-input-inline">
                        <span id="result" style="line-height: 38px;margin-left:5px"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button style="float: right;margin:5px 10px 0 0" class="layui-btn layui-btn-sm" id="returns"><i
                            class="layui-icon"></i>确定
                    </button>
                </div>
            </div>
        </div>
        <script>
            layui.config({
                base: serverPath.systemPath + staticPath.formPath //静态资源所在路径
            }).extend({
                index: 'index' //主入口模块
            }).use(['index','table', 'layer', 'jquery', 'form', 'setter'], function () {
                var table = layui.table;
                var layer = layui.layer;
                var $ = layui.$;
                var form = layui.form;
                var setter = layui.setter;
                var dialog = frameElement.dialog; //调用页面的dialog对象(ligerui对象)
                var calTools = [{exp: 'like', title: 'like', msg: '类似'}, {exp: 'not', title: 'not', msg: '不是'},
                        {exp: '||', title: 'or', msg: '或'}, {exp: '&&', title: 'and', msg: '并'},
                        {exp: '!=', title: '!=', msg: '不等于'}, {exp: '=', title: '=', msg: '等于'},
                        {exp: '<', title: '&lt;', msg: '小于'}, {exp: '>', title: '>', msg: '大于'},
                        {exp: ')', title: ')', msg: '右括号'}, {exp: '(', title: '(', msg: '左括号'},
                        {exp: '/', title: '÷', msg: '除'}, {exp: '*', title: '×', msg: '乘'},
                        {exp: '-', title: '-', msg: '减'}, {exp: '+', title: '+', msg: '加'}],
                    scriptTree, scriptTypes = [];

                function clickHandler() {
                    var exp = $(this).attr("exp");
                    InitMirror.editor.insertCode(exp);
                }

                $("#determine").on('click', function (e) {
                    var v = InitMirror.editor.getCode();
                    parent.$('#' + '${ids}').val(v);
                    parent.$('#' + '${names}').val(v);
                    parent.layer.close(index);
                })


                //初始化运算符工具窗口
                function initTools() {
                    var tool;
                    while (tool = calTools.pop()) {
                        var div = document.createElement("div");
                        div.title = tool.msg;
                        div.innerHTML = tool.title;
                        div.className = "calTool";
                        div.setAttribute("exp", tool.exp);
                        div.onclick = tool.clickHandler || clickHandler;
                        $("#tools_comment").append(div);
                    }
                    $(".calTool").bind("mouseenter mouseleave", function () {
                        $(this).toggleClass("tool-hover");
                    });
                    $(".toolbar_btn").bind("mouseenter mouseleave", function () {
                        $(this).toggleClass("toolbar_btn_hover");
                    });
                }

                $(function () {
                    initTools();
                    getScript();
                });

                //双击树添加内容到规则表达式
                function zTreeOnDblClick(event, treeId, treeNode) {
                    var str = treeNode.varKey || treeNode.script;
                    InitMirror.editor.insertCode(str);
                };

                //获取脚本数据
                function getScript() {
                    $.ajax({
                        type: 'post',
                        dataType: 'json',
                        url: serverPath.formPath + setter.formLinkPath + "script/list",
                        success: function (result) {
                            showResult(result.data);
                        }
                    });
                }

                //判断是否已添加该脚本类型
                function hasExist(d) {
                    for (var i = 0; i < scriptTypes.length; i++) {
                        var type = scriptTypes[i];
                        if (type.name == d) {
                            return type.id;
                        }
                    }
                    return false;
                }

                //脚本数据返回结果，构建脚本树
                function showResult(result) {
                    var setting = {
                        data: {
                            key: {
                                name: "name"
                            },
                            simpleData: {
                                enable: true,
                                idKey: "id",
                                pIdKey: "category",
                                rootPId: 0
                            }
                        },
                        view: {
                            selectedMulti: false
                        },
                        callback: {
                            onDblClick: zTreeOnDblClick
                        }
                    };
                    for (var i = 0; i < result.length; i++) {
                        var script = result[i];
                        var typeId = hasExist(script.category);
                        if (typeId) {
                            script.category = typeId;
                        } else {
                            scriptTypes.push({
                                name: script.category,
                                id: 0 - i - 1
                            });
                            script.category = 0 - i - 1;
                        }
                    }
                    var type;
                    while (type = scriptTypes.pop()) {
                        result.push({
                            id: type.id,
                            name: type.name,
                            category: 0
                        });
                    }
                    scriptTree = $.fn.zTree.init($("#scriptTree"), setting, result);
                    scriptTree.expandAll(true);
                }

                //关闭子弹窗
                var index = parent.layer.getFrameIndex(window.name);
                $('#returns').click(function () {
                    layer.close(layer.index);
                });
                //关闭本弹窗
                var index = parent.layer.getFrameIndex(window.name);
                $('#esc').click(function () {
                    parent.layer.close(index);
                });
                form.render();
                $("#verification").on('click', function () {
                    layer.open({
                        type: 1,
                        area: ['400px', '213px'],
                        title: ['对话框'],
                        content: $(".verResults"),
                        success: function (layero) {
                            var mask = $(".layui-layer-shade");
                            mask.appendTo(layero.parent());
                        }

                    });
                    var script = InitMirror.editor.getCode();
                    $.ajax({
                        url: serverPath.formPath + setter.formLinkPath + "script/getValidateResult",
                        dataType: 'json',
                        data: {"script": script},
                        success: function (obj) {
                            if (component.filterRecord(obj)) {
                                $("#resultType").text(obj.data.resultType);
                                $("#result").text(obj.data.result);
                            }
                        }
                    })
                })
            });
        </script>
    </body>
</html>